import React from "react";
import {Menu, Typography, Layout, Button} from "antd";
import './domList.scss';
import {MessageOutlined } from '@ant-design/icons';
import LikeOutlined from "@ant-design/icons/lib/icons/LikeOutlined";
import DislikeOutlined from "@ant-design/icons/lib/icons/DislikeOutlined";


const {Content} = Layout;
const { Paragraph ,Title } = Typography;
export default class DomList extends React.Component{
    constructor(props) {
        super(props);
        this.state={
            list:["我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我我",2123123123123,312313123,4,5,6,7,8,5,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,8,,8,8],
            like:'赞同',
            dislike:'不喜欢',
            show: 'none',
            likeCount: '',
            disLikeCount: ''
        }
    }

    handleCount=(data)=>{
        console.log(data);
    }

    handleClick=(e)=>{
        console.log(e.item.props.index);
    }

    handleUnfold=()=>{

    }

    render() {
        let list=this.state.list;
        return(
            <>
                {list.map((item,index)=> {
                            return (
                                <Content className="site-layout" >
                                    <div className="site-layout-background" key={index}>
                                        <div className="content" style={{marginLeft:'20px',marginRight:'20px',paddingTop:'10px'}}>
                                            <h4><b>小伍博客</b></h4>
                                            <Paragraph ellipsis={{ rows: 4, expandable: true, symbol: '阅读全文 ▽'}} onClick={this.handleUnfold}>
                                                {item}
                                            </Paragraph>
                                        </div>
                                        <div style={{marginTop:'-2%'}}>
                                            <Button icon={<LikeOutlined/>} type="text" onClick={this.handleCount("like")}>赞同{this.state.likeCount}</Button>
                                            <Button icon={<DislikeOutlined/>} type="text" onClick={this.handleCount("dislike")}>不喜欢{this.state.disLikeCount}</Button>
                                            <Button key={"comment"} icon={<MessageOutlined />} type="text">评论</Button>
                                            <Button key={"fold"} icon={<MessageOutlined />} style={{display: this.state.show,float:'right'}}>喜欢</Button>
                                        </div>
                                    </div>
                                </Content>
                            )
                        }
                    )
                }
            </>
        )
    }
}